<template>
    <div class="meet">


        <div class="block" style="border: none
                ">

            <el-date-picker v-model="dateValue" type="datetimerange" range-separator="To" start-placeholder="Start date"
                end-placeholder="End date" />
        </div>

    <el-button @click="sureTime" type="success">确定</el-button>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import { onMounted, ref } from "vue";
import { booking } from "../apis/projectApis/index";
import { ElMessage } from "element-plus";

const route = useRoute();

const twinID = ref(null);

const dateValue = ref("");

const date = (date) => {
  let result = new Date(date).getTime();
  return result;
};
const sureTime = async () => {
  let startTime = date(dateValue.value[0]);
  let endTime = date(dateValue.value[1]);
  let info = {
    twinID: twinID.value,
    startTime,
    endTime,
  };
  let res = await booking(info);
  console.log(res)
  if (res.data.code == 200) {
    ElMessage.success({
      message: "会议室预约成功",
    });
  }
};
onMounted(() => {
  twinID.value = route.query.id;
});
</script>

<style lang="scss" scoped>
.meet {
  width: 800px;
  height: 600px;
  box-sizing: border-box;

  .title {
    font-size: 25px;
    color: #007bff;
    margin-bottom: 20px;
  }
}

.block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  height: 30px;
}

.block:last-child {
  border-right: none;
}

.block .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.el-button {
  width: 200px;
  height: 45px;
  margin-left: 295px;
}
</style>